import Taro, { Component } from "@tarojs/taro";
import { View, Button, Text, Image } from "@tarojs/components";
import Head from "../../components/head";
import { getRecords, freezeAcclog } from "../../actions/records";
import Records from "../../components/records";
import { connect } from "@tarojs/redux";
import { AtIcon, AtModal } from "taro-ui";
import "./detail.less";

@connect(
  ({ records }) => ({
    ...records
  }),
  dispatch => ({
    async getRecords(params) {
      dispatch(await getRecords(params));
    },
    async freezeAcclog(params) {
      dispatch(await freezeAcclog(params));
    },
    changeType() {
      dispatch(changeType());
    }
  })
)
class Detail extends Component {
  config = {
    navigationBarTitleText: "可用账户明细"
  };

  state = {
    statusList: [
      { title: "全部", active: true, type: 9 },
      { title: "口碑结算", active: false, type: 3 },
      { title: "到店结算", active: false, type: 1 },
      { title: "成单结算", active: false, type: 2 },
      { title: "提现", active: false, type: 0 }
    ],
    showHelp: false
  };

  getRecords(params) {
    this.props.getRecords && this.props.getRecords(params);
  }

  getFreezeAccountLog(params) {
    this.props.freezeAcclog && this.props.freezeAcclog(params);
  }

  changeStatus(i) {
    let { statusList } = this.state;
    statusList.forEach((status, index) => {
      if (index === i) {
        status.active = true;
      } else {
        status.active = false;
      }
    });
    this.setState(
      {
        statusList
      },
      () => {
        this.props.getRecords({ page: 1, type: this.state.statusList[i].type });
      }
    );
  }

  showHelpModal() {
    this.setState({
      showHelp: true
    });
  }

  render() {
    const { statusList,showHelp } = this.state;
    const { status } = this.$router.params;
    const title = !parseInt(status) ? "账户金额明细" : "审核金额明细";
    const modalTitle = !parseInt(status) ? "账户金额说明" : "审核金额说明";
    const accountStatusList = !parseInt(status)
      ? this.props.record_list
      : this.props.freeze_list;
    const account = [<Text>1.展示分享赚钱佣金，邀约赚钱佣金，成交赚钱佣金。</Text>,
      <Text>2.展示提现操作记录。</Text>]
      const audit = [<Text>1.购买物品7日内可无理由退货。</Text>,
        <Text>2.成交日起7日后成交赚钱佣金会转移至账户金额。</Text>]
    const helpDoc = <View style="display:flex;flex-direction:column;widht:100%;justify-content:flex-start;">
      {!parseInt(status) ? account : audit}
    </View>
    return (
      <View className="detail-index">
        {/* <Head title={title} urlPath={'/pages/mine/index'} /> */}
        <View className="detail-head">
          <View className="final-back-page">
            <Image
              className="back-page"
              onClick={() => {
                Taro.redirectTo({
                  url: "/pages/mine/index"
                });
              }}
              src={require("../../assets/img/back.png")}
            />
          </View>
          <Text className="title">{title}</Text>
          <View
            style="position:absolute;top:0;bottom:0;margin:auto;right:20px;"
            onClick={this.showHelpModal.bind(this)}
          >
            <AtIcon
              value="help"
              size="20"
              color="#FFFFFF"
              style="padding-left:15px;"
            />
          </View>
        </View>
        <Records
          recordsList={accountStatusList}
          status={parseInt(status)}
          statusList={statusList}
          getRecords={this.getRecords.bind(this)}
          getFreezeAccountLog={this.getFreezeAccountLog.bind(this)}
          changeStatus={this.changeStatus.bind(this)}
        />
        <AtModal
          isOpened={showHelp}
          title={modalTitle}
          content={helpDoc}
        />
      </View>
    );
  }
}
export default Detail;
